{% extends 'base.html' %}

{% load my_filters_and_tags %}
{% load static %}
{% load my_filters_and_tags %}
{% load comment_tags %}
{% load friendship_tags %}


{% block css %}

    <!-- Begin emoji-picker Stylesheets -->
    <link href="{% static 'plugin/emoji_jQuery/lib/css/nanoscroller.css' %}" rel="stylesheet">
    <link href="{% static 'plugin/emoji_jQuery/lib/css/emoji.css' %}" rel="stylesheet">
    <!-- End emoji-picker Stylesheets -->

    <style>
        .panel-default > .panel-heading .function .upload {
            overflow: hidden;
        }

        .panel-default > .panel-heading .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-default > .panel-heading a {
            text-decoration: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

    </style>
{% endblock %}

{% block content %}
    <div class="py-4" style="background: #0E2231">
        <div class="container" style="margin-top: 50px">
            <div class="row">

                <!-- Main Content -->

                <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">

                    <!-- 一条心情 -->
                    <div class="box mb-3 shadow-sm border rounded bg-white osahan-post infinite-item">

                        <!--删除心情-->
                        {% if mood_post.author == request.universe.user %}
                            <div style="float: right; margin-right: 4px; margin-top: 4px">
                                <div class="btn-group">
                                    <button type="button" class="small" style="border: 0px"
                                            data-toggle="dropdown" aria-expanded="false">
                                        X
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right small"
                                         style="min-width: 50px">
                                            <span class="ml-auto small">
                                                <a class="btn-sm small dropdown-item"
                                                   href="{% url 'mood_delete' mood_id=mood_post.id %}">删除
                                                    <i class="bi bi-emoji-dizzy"
                                                       style="font-size: 1rem; color: #cb2027"></i>
                                                </a>
                                            </span>
                                    </div>
                                </div>
                            </div>
                        {% endif %}


                        <div class="p-3 d-flex align-items-center border-bottom osahan-post-header">
                            <div class="dropdown-list-image mr-3">
                                <img class="rounded-circle" src="{{ mood_post.author.avatar.url }}" alt="">
                                <div class="status-indicator bg-success"></div>
                            </div>
                            <div class="font-weight-bold" style="width: 100%">

                                <div class="text-truncate">
                                    {{ mood_post.author.username }}
                                    {% if request.universe.user != mood_post.author %}
                                        {% which_friendship request mood_post.author %}
                                    {% else %}
                                        <div style="float: right">我发布的</div>
                                    {% endif %}
                                </div>
                                <div class="small text-gray-500" id="main">
                                    <div style="float:left;">{{ mood_post.author.motto }}</div>
                                    <div id="right"
                                         style="float:right; margin-right: 3px">{{ mood_post.create_datetime|timesince_zh }}</div>
                                </div>
                            </div>

                        </div>

                        <div class="p-3 border-bottom osahan-post-body">
                            <!-- 心情内容 -->
                            <div style="width: 100%; word-wrap:break-word; font-size: 18px; ">
                                <p> {{ mood_post.intro|linebreaks }} </p>
                                <!-- |linebreaks 保留换行符-->
                            </div>
                            <!-- 心情图片 -->
                            <div>
                                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        {% if mood_post.get_images.count > 1 %}
                                            {% for x in mood_post.get_images.count|get_range %}
                                                <li data-target="#carouselExampleIndicators"
                                                        {% if forloop.counter == 1 %}
                                                    class="active"
                                                        {% endif %}
                                                    data-slide-to="{{ x }}"></li>
                                            {% endfor %}
                                        {% endif %}
                                    </ol>
                                    <div class="carousel-inner">
                                        {% for img in mood_post.get_images %}
                                            <div class="carousel-item {% if img == mood_post.get_images.0 %} active {% endif %}">
                                                <img src="{{ img.thumbnail_url }}"
                                                     class="img-fluid"
                                                     alt="Responsive image"
                                                     style="width: 100%; display: block; max-width: 100%; height: auto;">
                                            </div>
                                        {% endfor %}
                                    </div>
                                    {#                                    <button class="carousel-control-prev" type="button"#}
                                    {#                                            data-target="#carouselExampleIndicators" data-slide="prev">#}
                                    {#                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>#}
                                    {#                                        <span class="sr-only">Previous</span>#}
                                    {#                                    </button>#}
                                    {#                                    <button class="carousel-control-next" type="button"#}
                                    {#                                            data-target="#carouselExampleIndicators" data-slide="next">#}
                                    {#                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>#}
                                    {#                                        <span class="sr-only">Next</span>#}
                                    {#                                    </button>#}
                                </div>
                            </div>

                        </div>

                        <div class="p-3 osahan-post-footer">

                            <!-- 点赞开始 -->
                            <a href="javascript:void(0);" id="like_{{ mood_post.id }}"
                               class="mr-3 text-secondary" onclick="likeMood('{{ mood_post.id }}')">
                                <i class="bi bi-heart-fill"
                                        {% for liker in mood_post.get_likers %}
                                            {% if liker.user == request.universe.user %}
                                   style="color: #cb2027"
                                            {% endif %}
                                        {% endfor %}></i>
                                <span id="like_count"> {{ mood_post.like_amount }}</span>
                            </a>
                            <!-- 点赞结束 -->

                            <!-- 评论数 -->
                            <a href="#" class="mr-3 text-secondary"
                               data-toggle="collapse" role="button" aria-expanded="false"
                               aria-controls="collapseExample"><i
                                    class="bi bi-chat-left-dots"></i><span> {% get_comment_count mood_post %}</span></a>

                            <!-- 点赞头像列表 -->
                            <div class="d-flex align-items-center p-3">
                                <div class="overlap-rounded-circle">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p13.png' %}" alt=""
                                         data-original-title="Sophia Lee">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p1.png' %}" alt=""
                                         data-original-title="John Doe">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p3.png' %}" alt=""
                                         data-original-title="Robert Cook">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p3.png' %}" alt=""
                                         data-original-title="Robert Cook">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p3.png' %}" alt=""
                                         data-original-title="Robert Cook">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p3.png' %}" alt=""
                                         data-original-title="Robert Cook">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p3.png' %}" alt=""
                                         data-original-title="Robert Cook">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p3.png' %}" alt=""
                                         data-original-title="Robert Cook">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p13.png' %}" alt=""
                                         data-original-title="Sophia Lee">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p1.png' %}" alt=""
                                         data-original-title="John Doe">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p13.png' %}" alt=""
                                         data-original-title="Sophia Lee">
                                    <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                         data-placement="top"
                                         title="" src="{% static 'img/p1.png' %}" alt=""
                                         data-original-title="John Doe">
                                    {% for liker in mood_post.get_likers %}
                                        <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                             data-placement="top"
                                             title="" src="{{ liker.user.avatar.url }}" alt=""
                                             data-original-title="John Doe">
                                    {% endfor %}
                                </div>
                                <span class="font-weight-bold text-muted">{{ mood_post.like_amount }} likes</span>
                            </div>

                            <!-- 发表评论开始 -->
                            <div class="card card-body" style="border: 0px">

                                {% if request.universe.user %}
                                    <form id="commentForm" method="POST">
                                        {% csrf_token %}
                                        <div class="input-group mb-3" style="margin-top: 10px">
                                            {% get_comment_form mood_post as comment_form %}
                                            {% for field in comment_form %}
                                                {{ field }}
                                            {% endfor %}
                                            <!-- 提交按钮 -->
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button"
                                                        id="comment_send">
                                                    评论
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                {% else %}
                                    <h5 class="row justify-content-center">
                                        请<a href="{% url 'login' %}">登录</a>后回复
                                    </h5>
                                {% endif %}
                                <!-- 发表评论结束 -->

                                <!-- 心情评论列表 comment -->
                                <div class="infinite-container">
                                    <div class="comments">
                                        {% load mptt_tags %}
                                        {#                                    {% get_comment_list request mood_post as comments %}#}
                                        {% recursetree comments %}
                                            {% with comment=node %}

                                                <div class="d-flex align-items-top osahan-post-comment
                                                {% if not comment.reply_to %}
                                                    border-bottom p-3
                                                {% else %}
                                                    p-2
                                                {% endif %}">
                                                    <!-- 头像占列,回复的不显示头像 -->
                                                    {% if not comment.reply_to %}
                                                        <div class="dropdown-list-image mr-1">
                                                            <img class="rounded-circle"
                                                                 src="{% static 'img/logo.jpeg' %}"
                                                                 alt="">
                                                            <div class="status-indicator bg-success"></div>
                                                        </div>
                                                    {% endif %}

                                                    <div class="font-weight-btext-truncateold mr-3" style="width: 100%">
                                                        <div class="text-truncate" style="width: 100%;">
                                                            <div class="{% if comment.reply_to %} col-10 {% else %} col-12 {% endif %}"
                                                                 id="comment_elem_{{ comment.pk }}">
                                                                <strong>{{ comment.user }}</strong>
                                                                <!-- 显示被回复人 -->
                                                                {% if comment.reply_to %}
                                                                    <i class="bi bi-caret-right-fill"
                                                                       style="color: cornflowerblue;"></i>
                                                                    <strong style="color: #4d417c">{{ comment.reply_to.username }}</strong>
                                                                {% endif %}
                                                            </div>
                                                            <span class="small"
                                                                  style="font-size: 0.5rem; color: #858c96">{{ comment.create_datetime|date:"Y-m-d H:i" }}
                                                                <!-- 添加回复操作 -->
                                                                {% if comment.user != request.universe.user %}
                                                                    <button type="button"
                                                                            class="btn btn-outline-secondary small"
                                                                            style="border: 0px"
                                                                            data-toggle="modal"
                                                                            data-target="#replayModal"
                                                                            data-name="{{ comment.user.username }}"
                                                                            data-mood="{{ mood_post.id }}"
                                                                            data-comment="{{ comment.id }}"
                                                                            data-whatever="{{ comment.id }}"
                                                                    >
                                                                    <i class="bi bi-chat-right-text"></i>
                                                                </button>
                                                                {% endif %}

                                                                <!-- 删除评论 -->
                                                                {% if comment.user == request.universe.user %}
                                                                    <a class="btn-sm small"
                                                                       href="{% url 'comment:delete_comment' comment_id=comment.id %}">
                                                                                <i class="bi bi-x"
                                                                                   style="font-size: 1rem; color: #cb2027"></i></a>
                                                                {% endif %}
                                                        </span>
                                                        </div>

                                                        <div class="small text-blue-500">

                                                            <!-- 评论内容 -->
                                                            <div>
                                                                {{ comment.body|safe }}

                                                                <div class="modal fade" id="replayModal" tabindex="-1"
                                                                     aria-labelledby="exampleModalLabel"
                                                                     aria-hidden="true">
                                                                    <div class="modal-dialog">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <h5 class="modal-title"
                                                                                    id="exampleModalLabel">
                                                                                    回复</h5>
                                                                                <button type="button" class="close"
                                                                                        data-dismiss="modal"
                                                                                        aria-label="Close">
                                                                                    <span aria-hidden="true">&times;</span>
                                                                                </button>
                                                                            </div>

                                                                            <div class="modal-body">
                                                                                <form id="replayForm"
                                                                                      method="POST">
                                                                                    {% csrf_token %}
                                                                                    <div class="form-group">
                                                                                        <label for="message-text"
                                                                                               class="col-form-label">Message:</label>
                                                                                        {% get_comment_form mood_post as replay_comment_form %}
                                                                                        {% for field in comment_form %}
                                                                                            {{ field }}
                                                                                        {% endfor %}
                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button"
                                                                                        class="btn btn-secondary"
                                                                                        data-dismiss="modal">取消
                                                                                </button>
                                                                                <button type="button"
                                                                                        class="btn btn-primary"
                                                                                        id="comment_replay">
                                                                                    回复
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            {% if not comment.is_leaf_node %}
                                                                <div class="children"
                                                                     style="background: #dce2e3; border-radius:8px;">
                                                                    {{ children }}
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </div>

                                            {% endwith %}

                                        {% endrecursetree %}
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>


                    <!-- 分页功能
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {% if comments.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" aria-label="Previous"
                                       href="?page={{ comments.previous_page_number }}">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>

                            {% endif %}
                            {% for page_num in comments.paginator.page_range %}
                                <li {% if page_num == comments.number %} class="page-item active" {% else %}
                                                                     class="page-item" {% endif %}>
                                    <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                                </li>
                            {% endfor %}
                            {% if comments.has_next %}
                                <li class="page-item">
                                    <a href="?page={{ comments.next_page_number }}"
                                       class="page-link" aria-label="Next"><span
                                            aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                     -->
                    <!-- status elements -->
                    <div class="scroller-status">
                        <div class="infinite-scroll-request loader-ellips">
                            ...
                        </div>
                        <p class="infinite-scroll-last">End of content</p>
                        <p class="infinite-scroll-error">No more pages to load</p>
                    </div>

                    {% if comments.has_next %}
                        <div class="pagination">
                            <a href="?page={{ comments.next_page_number }}" class="infinite-more-link pagination__next"
                               aria-label="Next"></a>
                        </div>
                    {% endif %}

                    <div class="loading" style="display: none;">
                        Loading...
                    </div>

                </main>

                <aside class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
                    <div style="position: fixed; width: 265.5px">
                        <div class="box mb-3 shadow-sm border rounded bg-white profile-box text-center">
                            <div class="py-4 px-3 border-bottom">
                                <img src="{{ request.universe.user.avatar.url }}" class="img-fluid mt-2 rounded-circle"
                                     alt="Responsive image" width="130px" , height="130px">
                                <h5 class="font-weight-bold text-dark mb-1 mt-4">{{ request.universe.user.username }}</h5>
                                <p class="mb-2 text-muted">{{ request.universe.user.motto }}</p>
                            </div>
                            <div class="d-flex">
                                <div class="col-6 border-right p-3">
                                    <h6 class="font-weight-bold text-dark mb-1">358</h6>
                                    <p class="mb-0 text-black-50 small">Connections</p>
                                </div>
                                <div class="col-6 p-3">
                                    <h6 class="font-weight-bold text-dark mb-1">85</h6>
                                    <p class="mb-0 text-black-50 small">Views</p>
                                </div>
                            </div>
                            <div class="overflow-hidden border-top">
                                <a class="font-weight-bold p-3 d-block"
                                   href="{% url 'profile' request.universe.user.id %}"> View my profile </a>
                            </div>
                        </div>
                        <!--
                        <div class="box mb-3 shadow-sm rounded bg-white view-box overflow-hidden">
                            <div class="box-title border-bottom p-3">
                                <h6 class="m-0">发布内容统计</h6>
                            </div>
                            <div class="d-flex text-center">
                                <div class="col-6 border-right py-4 px-2">
                                    <h5 class="font-weight-bold text-info mb-1">08 <i class="feather-bar-chart-2"></i>
                                    </h5>
                                    <p class="mb-0 text-black-50 small">last 5 days</p>
                                </div>
                                <div class="col-6 py-4 px-2">
                                    <h5 class="font-weight-bold text-success mb-1">+ 43% <i
                                            class="feather-bar-chart"></i></h5>
                                    <p class="mb-0 text-black-50 small">Since last week</p>
                                </div>
                            </div>
                            <div class="overflow-hidden border-top text-center">
                                <img src="{% static 'img/chart.png' %}" class="img-fluid" alt="Responsive image">
                            </div>
                        </div>
                        <div class="box shadow-sm mb-3 rounded bg-white ads-box text-center">
                            <img src="{% static 'img/job1.png' %}" class="img-fluid" alt="Responsive image">
                            <div class="p-3 border-bottom">
                                <h6 class="font-weight-bold text-dark">Osahan Solutions</h6>
                                <p class="mb-0 text-muted">Looking for talent?</p>
                            </div>
                            <div class="p-3">
                                <button type="button" class="btn btn-outline-primary pl-4 pr-4"> POST A JOB</button>
                            </div>
                        </div>
                        -->

                    </div>
                </aside>
                <!--
                <aside class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">
                    <div style="position: fixed; width: 265.5px">
                        <div class="box shadow-sm border rounded bg-white mb-3">
                            <div class="box-title border-bottom p-3">
                                <h6 class="m-0">Today's task</h6>
                            </div>
                            <div class="box-body p-3">
                                <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p8.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">Sophia Lee</div>
                                        <div class="small text-gray-500">Student at Harvard
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                           </span>
                                </div>
                                <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p9.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">John Doe</div>
                                        <div class="small text-gray-500">Traveler
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                           </span>
                                </div>
                                <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p10.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">Julia Cox</div>
                                        <div class="small text-gray-500">Art Designer
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                           </span>
                                </div>
                                <div class="d-flex align-items-center osahan-post-header mb-3 people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p11.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">Robert Cook</div>
                                        <div class="small text-gray-500">Photographer at Photography
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                           </span>
                                </div>
                                <div class="d-flex align-items-center osahan-post-header people-list">
                                    <div class="dropdown-list-image mr-3">
                                        <img class="rounded-circle" src="{% static 'img/p12.png' %}" alt="">
                                        <div class="status-indicator bg-success"></div>
                                    </div>
                                    <div class="font-weight-bold mr-2">
                                        <div class="text-truncate">Richard Bell</div>
                                        <div class="small text-gray-500">Graphic Designer at Envato
                                        </div>
                                    </div>
                                    <span class="ml-auto"><button type="button" class="btn btn-light btn-sm"><i
                                            class="feather-user-plus"></i></button>
                                           </span>
                                </div>
                            </div>
                        </div>
                        <div class="box shadow-sm mb-3 rounded bg-white ads-box text-center overflow-hidden">
                            <img src="{% static 'img/ads1.png' %}" class="img-fluid" alt="Responsive image">
                            <div class="p-3 border-bottom">
                                <h6 class="font-weight-bold text-gold">Osahanin Premium</h6>
                                <p class="mb-0 text-muted">Grow & nurture your network</p>
                            </div>
                            <div class="p-3">
                                <button type="button" class="btn btn-outline-gold pl-4 pr-4"> ACTIVATE</button>
                            </div>
                        </div>
                        <div class="box shadow-sm border rounded bg-white mb-3">
                            <div class="box-title border-bottom p-3">
                                <h6 class="m-0">Today's task
                                </h6>
                            </div>
                            <div class="box-body p-3">
                                <a href="job-profile.html">
                                    <div class="shadow-sm border rounded bg-white job-item mb-3">
                                        <div class="d-flex align-items-center p-3 job-item-header">
                                            <div class="overflow-hidden mr-2">
                                                <h6 class="font-weight-bold text-dark mb-0 text-truncate">Product
                                                    Director</h6>
                                                <div class="text-truncate text-primary">Spotify Inc.</div>
                                                <div class="small text-gray-500"><i class="feather-map-pin"></i> India,
                                                    Punjab
                                                </div>
                                            </div>
                                            <img class="img-fluid ml-auto" src="{% static 'img/l3.png' %}" alt="">
                                        </div>
                                        <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                            <div class="overlap-rounded-circle">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p9.png' %}" alt=""
                                                     data-original-title="Sophia Lee">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p10.png' %}" alt=""
                                                     data-original-title="John Doe">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p11.png' %}" alt=""
                                                     data-original-title="Julia Cox">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p12.png' %}" alt=""
                                                     data-original-title="Robert Cook">
                                            </div>
                                            <span class="font-weight-bold text-muted">18 connections</span>
                                        </div>
                                        <div class="p-3 job-item-footer">
                                            <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days ago</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="job-profile.html">
                                    <div class="shadow-sm border rounded bg-white job-item">
                                        <div class="d-flex align-items-center p-3 job-item-header">
                                            <div class="overflow-hidden mr-2">
                                                <h6 class="font-weight-bold text-dark mb-0 text-truncate">.NET
                                                    Developer</h6>
                                                <div class="text-truncate text-primary">Invision</div>
                                                <div class="small text-gray-500"><i class="feather-map-pin"></i> London,
                                                    UK
                                                </div>
                                            </div>
                                            <img class="img-fluid ml-auto" src="{% static 'img/l4.png' %}" alt="">
                                        </div>
                                        <div class="d-flex align-items-center p-3 border-top border-bottom job-item-body">
                                            <div class="overlap-rounded-circle">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p13.png' %}" alt=""
                                                     data-original-title="Sophia Lee">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p1.png' %}" alt=""
                                                     data-original-title="John Doe">
                                                <img class="rounded-circle shadow-sm" data-toggle="tooltip"
                                                     data-placement="top"
                                                     title="" src="{% static 'img/p3.png' %}" alt=""
                                                     data-original-title="Robert Cook">
                                            </div>
                                            <span class="font-weight-bold text-muted">18 connections</span>
                                        </div>
                                        <div class="p-3 job-item-footer">
                                            <small class="text-gray-500"><i class="feather-clock"></i> Posted 3 Days ago</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </aside>
                -->

            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <script src="{% static 'mood/js/jquery.waypoints.min.js' %}"></script>
    {#    <script src="{% static 'mood/js/infinite.min.js' %}"></script>      <!-- 无限滚动插件 -->#}
    <script src="{% static 'mood/js/infinite-scroll.pkgd.min.js' %}"></script>      <!-- 无限滚动插件 -->

    <!-- Begin emoji-picker JavaScript -->
    <script src="{% static 'plugin/emoji_jQuery/lib/js/nanoscroller.min.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/tether.min.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/config.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/util.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/jquery.emojiarea.js' %}"></script>
    <script src="{% static 'plugin/emoji_jQuery/lib/js/emoji-picker.js' %}"></script>
    <!-- End emoji-picker JavaScript -->

    <script type="text/javascript">
        // 页面框架加载完成之后自动执行函数
        $(function () {
            bindCommentSubmit();
            initAddModal();
            bindReplaySubmit();
            infiniteScroll();   // 无限滚动
            emoji();    // 添加emoji表情
            cal();  // 计算字数
        });

        // 发布评论
        function bindCommentSubmit() {
            $('#comment_send').click(function () {
                let $comment_send = $('#comment_send');
                $comment_send.prop('disabled', true); // 禁用发送按钮，避免用户重复点击发送
                $('.error-msg').empty();

                // 收集表单中的数据（找到每一个字段）$('#moodForm').serialize()
                // 数据ajax发送到后台
                $.ajax({
                    url: "{% url 'comment:mood_comment' %}",
                    type: "POST",
                    // data: $('#moodForm').serialize()+'&'+$.param({"image_list":imageList}), // 所有字段数据 + csrf token。   添加form表单外的其他参数(+'&'+$.param({"image_list":imageList})
                    data: $('#commentForm').serialize(),
                    dataType: "JSON",
                    traditional: true,
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            let next_url = "{% url 'mood_detail' mood_post.id %}";
                            // 去除 url 尾部 '/' 符号
                            next_url = next_url.charAt(next_url.length - 1) == '/' ? next_url.slice(0, -1) : next_url;
                            // 刷新并定位到锚点
                            window.location.replace(next_url + "#comment_elem_" + res.new_comment_id);
                            // location.href = location.href //指向本页面，不刷新
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        };

        // 回复评论框初始化
        function initAddModal() {
            $('#replayModal').on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget); // Button that triggered the modal
                let recipient = button.data('whatever'); // Extract info from data-* attributes
                let name = button.data('name'); // Extract info from data-* attributes
                let comment_id = button.data('comment'); // Extract info from data-* attributes
                let modal = $(this);
                modal.find('.modal-title').text("回复：" + name);

                if (comment_id) {
                    // 编辑
                    modal.find('#parent_comment_id').val(comment_id);
                } else {
                    // 新建
                    modal.find('.error-msg').empty();
                }
            });
        }

        // 回复评论
        function bindReplaySubmit() {
            $('#comment_replay').click(function () {
                // 收集表单中的数据（找到每一个字段）$('#moodForm').serialize()
                // 数据ajax发送到后台
                $.ajax({
                    url: "{% url 'comment:mood_comment' %}",
                    type: "POST",
                    // data: $('#moodForm').serialize()+'&'+$.param({"image_list":imageList}), // 所有字段数据 + csrf token。   添加form表单外的其他参数(+'&'+$.param({"image_list":imageList})
                    data: $('#replayForm').serialize(),
                    dataType: "JSON",
                    traditional: true,
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            let next_url = "{% url 'mood_detail' mood_post.id %}";
                            console.log(next_url)
                            console.log(res.new_comment_id)
                            // 去除 url 尾部 '/' 符号
                            next_url = next_url.charAt(next_url.length - 1) == '/' ? next_url.slice(0, -1) : next_url;
                            // 刷新并定位到锚点
                            window.location.replace(next_url + "#comment_elem_" + res.new_comment_id);
                            // location.href = location.href //指向本页面，不刷新
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

        function likeMood(mood_id) {
            var $like = $("#like_" + mood_id)
            var like_count = $like.children("#like_count").text()
            $.ajax({
                type: 'POST',
                url: '{% url 'mood_like' %}',
                data: {"mood_id": mood_id},
                dataType: "json",
                global: false,
                success: function (res) {
                    if (res.status) {
                        if (res.data) {
                            // document.getElementById(tdId).innerHTML = "是";
                            // $("#like_" + mood_id).next().css("color", "#cb2027")
                            $like.children(".bi").css("color", "#cb2027");
                            $like.children("#like_count").text(parseInt(like_count) + 1);
                        } else {
                            $like.children(".bi").css("color", "#4c4c4c");
                            $like.children("#like_count").text(parseInt(like_count) - 1);
                        }
                    } else {
                        alertMsg.error("操作失败.");
                    }
                },
                // error: DWZ.ajaxError
            });
        }

        function emoji() {
            // Initializes and creates emoji set from sprite sheet
            window.emojiPicker = new EmojiPicker({
                emojiable_selector: '[data-emojiable=true]',
                assetsPath: '{% static 'plugin/emoji_jQuery/lib/img' %}',
                popupButtonClasses: 'bi bi-emoji-sunglasses',
                iconSize: 20,
            });
            // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
            // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
            // It can be called as many times as necessary; previously converted input fields will not be converted again
            window.emojiPicker.discover();
        };

        function cal() {
            var max = 150;
            $('.emoji-wysiwyg-editor').on('input', function () {    // emoji插件改变了textarea内容位置
                var text = $(this).text();
                var len = text.length;
                $('#count').text(len);
            });
        }

        // 滚动动画
        if (window.location.hash) {
            $('html').animate({
                scrollTop: $(window.location.hash).offset().top - 60
            }, 500);
        }

        // init Infinite Scroll
        function infiniteScroll() {
            $('.infinite-container').infiniteScroll({
                path: '.pagination__next',
                append: '.osahan-post-comment',        // 获取到的数据将添加到 .post类内的元素
                status: '.scroller-status',
                hideNav: '.pagination',
            })
        }

    </script>
{% endblock %}